<template>
  <el-card>
    <div class="filter-item">
      <label>博主标签</label>
      <div class="filter-content">
            <el-radio-group v-model="filterParams.tags" size="mini">
          <el-radio-button
            v-for="tag in tags"
            :key="tag"
            :label="tag"
          ></el-radio-button>
        </el-radio-group>
        <!-- <el-checkbox-group v-model="filterParams.tags" size="mini">
          <el-checkbox-button v-for="tag in tags" :key="tag" :label="tag"
            >{{ tag }}
          </el-checkbox-button>
        </el-checkbox-group> -->
      </div>
    </div>
    <div class="filter-item">
      <label>筛选条件</label>
      <div class="filter-content">
        <div class="item">
          <label class="title">博主地区</label>
          <el-select
            v-model="filterParams.province"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in provinceData"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <label class="title">粉丝数</label>
          <el-select
            v-model="filterParams.fansNum"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in fansNumZone"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <label class="title">MCN机构</label>
          <el-select
            v-model="filterParams.MCN"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in MCNS"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <label class="title">赞藏总数</label>
          <el-select
            v-model="filterParams.liekAndCollect"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in liekCollectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <label class="title">性别</label>
          <el-radio-group v-model="filterParams.sex" size="mini">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="filter-item" style="margin-bottom: 0;">
      <label>高级筛选</label>
      <div class="filter-content">
        <el-checkbox-group v-model="filterParams.otherConditions" size="mini">
          <el-checkbox
            v-for="item in otherConditions"
            :key="item"
            :label="item"
          />
        </el-checkbox-group>
      </div>
    </div>
    <!-- <div class="filter-item">
      <label>粉丝画像</label>
      <div class="filter-content">
        <div class="item">
          <label class="title">粉丝地区</label>
          <el-cascader
            v-model="filterParams.fanArea"
            :options="provinceCascaderData"
            size="mini"
          ></el-cascader>
        </div>
        <div class="item">
          <label class="title">粉丝性别</label>
          <el-radio-group v-model="filterParams.fanSex" size="mini">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">男性居多</el-radio>
            <el-radio :label="2">女性居多</el-radio>
          </el-radio-group>
        </div>
        <div class="item">
          <label class="title">粉丝年龄</label>
          <el-select
            v-model="filterParams.fanAge"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in fanAgeZone"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div> -->
  </el-card>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { provinceData, provinceCascaderData } from "./province";

const filterParams = ref({
  tags: "全部",
  province: "不限",
  fansNum: 0,
  MCN: "无",
  liekAndCollect: 0,
  sex: 0,
  otherConditions: [],
  fanArea: ["不限"],
  fanSex: 0,
  fanAge: 0,
});
const tags = ref([
  "全部",
  // "时尚",
  "美妆",
  // "出行",
  "家居家装",
  "美食",
  // "运动健身",
  // "宠物",
  // "摄影",
  // "情感",
  "母婴",
  // "健康",
  // "汽车",
  // "搞笑",
  "科技数码",
  "教育",
  // "日常",
  // "体育赛事",
  // "素材",
  // "减肥",
  // "婚嫁",
  // "星座命理",
  // "民生资讯",
  // "萌娃",
  // "兴趣爱好",
  // "文化",
  // "影视",
  // "游戏",
  // "娱乐",
  // "知识",
]);
const fansNumZone = ref([
  {
    label: "不限",
    value: 0,
  },
  {
    label: "100万以上",
    value: 1,
  },
  {
    label: "20万-100万",
    value: 2,
  },
  {
    label: "10万-50万",
    value: 3,
  },
  {
    label: "1万-10万",
    value: 4,
  },
  {
    label: "1万以下",
    value: 5,
  },
]);
const MCNS = ["无", "蜂群", "里刻", "大禹"];
const kolTypes = ref([
  {
    label: "不限",
    value: 0,
  },
  {
    label: "企业账号",
    value: 1,
  },
  {
    label: "个人认证",
    value: 2,
  },
]);
const liekCollectOption = ref([
  {
    label: "不限",
    value: 0,
  },
  {
    label: "50万以上",
    value: 1,
  },
  {
    label: "30万-50万",
    value: 2,
  },
  {
    label: "10万-30万",
    value: 3,
  },
  {
    label: "5万-10万",
    value: 4,
  },
  {
    label: "1万-5万",
    value: 5,
  },
  {
    label: "1万以下",
    value: 6,
  },
]);
const otherConditions = ref([
  "有联系方式",
  "有品牌合作",
  "有框架合同",
]);
const fanAgeZone = ref([
  {
    label: "不限",
    value: 0,
  },
  {
    label: ">44",
    value: 1,
  },
  {
    label: "35-44",
    value: 2,
  },
  {
    label: "25-34",
    value: 3,
  },
  {
    label: "18-24",
    value: 4,
  },
  {
    label: "<18",
    value: 5,
  },
]);
</script>
<style lang="scss" scoped>
.filter-item {
  display: flex;
   margin-bottom: 10px;
  > label {
    width: 100px;
    flex-shrink: 0;
    line-height: 28px;
  }
  .filter-content {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    .item {
      margin-right: 40px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
    .title {
      font-size: 14px;
      margin-right: 10px;
      line-height: 20px;
    }
  }
}
.el-checkbox-button,
.el-radio-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

:deep(.el-checkbox-button) {
  .el-checkbox-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: var(--el-border-radius-base);
    box-shadow: none;
  }
}
:deep(.el-checkbox-button.is-checked) {
  .el-checkbox-button__inner {
    border-left: 1px solid var(--el-checkbox-button-checked-border-color);
  }
}
:deep(.el-checkbox-button.is-focus) {
  .el-checkbox-button__inner {
    border-left: 1px solid var(--el-checkbox-button-checked-border-color);
  }
}
:deep(.el-radio-button) {
  .el-radio-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: var(--el-border-radius-base);
    box-shadow: none;
  }
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  border-left: 1px solid var(--el-radio-button-checked-border-color);
}
</style>
